<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
    style="top:10%;height: 85%;overflow-y: hidden">
    <template slot="footer">
      <a-button key="back" @click="handleCancel">关闭</a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form" id="userModal">
        <a-row :md="24">
          <template v-for="(item, index) in columns">
              <a-col :md="12">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="item.label" :id="item.fieldName">
                  <a-input readOnly class="readOnly" v-decorator.trim="[ item.dataIndex ]" />
                </a-form-item>
              </a-col>
          </template>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
  import pick from 'lodash.pick'
  import Vue from 'vue'
  import JSelectPosition from '@/components/jeecgbiz/JSelectPosition'
  import { ACCESS_TOKEN } from "@/store/mutation-types"
  import { getAction } from '@/api/manage'
  import {addUser,editUser,queryOrganizationTreeList,roleAllList} from '@/api/api'
  import { disabledAuthFilter } from "@/utils/authFilter"
  import {duplicateCheck } from '@/api/api'
  import {autoJumpNextInput} from "@/utils/util"
  import JImageUpload from '../../../components/jeecg/JImageUpload'
  export default {
    name: "SimpleDetailModal",
    components: {
      JImageUpload,
      JSelectPosition
    },
    props: {
      columns: {
        type: Array,
        required: false
      },
      dictValues: {
        type: Object,
        required: false,
        default(){
          return {}
        }
      }
    },
    data () {
      return {
        title:"操作",
        visible: false,
        modalWidth:800,
        drawerWidth:700,
        isReadOnly: false,
        disableSubmit: true,
        dateFormat:"YYYY-MM-DD",        
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        headers:{},
        confirmLoading: false,        
        form:this.$form.createForm(this)
      }
    },
    created () {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"X-Access-Token":token}
    },
    methods: {
      getDictValue(dict, text){
        if(!text){return;}
        text = text + "";
        const vs = this.dictValues[dict];
        if(vs){
          for(var v =0; v < vs.length; v++){
            if(vs[v].valueCode == text){
              return vs[v].valueName;
            }
          }
        }
      },
      edit (record, readOnly) {
        const that = this;
        if(readOnly){
          this.isReadOnly = true;
        }else{
          this.isReadOnly = false;
        }
        this.form.resetFields();
        this.visible = true;
        this.model = Object.assign({}, record);
        this.$nextTick(() => {
          var cns = [];
          for(var idx in this.columns){
            if(this.columns[idx].dataIndex){
              cns.push(this.columns[idx].dataIndex)
            }
          }
          const data = pick(this.model, ...cns);
          
          for(var idx in this.columns){
            const dst = this.columns[idx].dataSourceType;
            const key = this.columns[idx].dataIndex;
            if(dst == "DICT" || dst == "ENUM" ||dst == "TABLE_COLUMN" ){
              const ps = this.columns[idx].dataSourceTypeParam.split(".");
			  if(ps.length <= 3){
				data[key] = that.getDictValue(ps[0], record[key])
			  }else {
				 data[key] = that.getDictValue(this.columns[idx].dataSourceTypeParam, record[key])
			  }
            }
          }
          this.form.setFieldsValue(data)
        });
      },
      detail(record){
        this.edit(record, true);
      },
      show(record, type){
        this.edit(record, true);
      },
      close() {
        this.$emit('close');
        this.visible = false;
        this.disableSubmit = false;
      },      
      handleCancel() {
        this.close()
      }
    }
  }
</script>

<style scoped>
  .readOnly{border: none;box-shadow: none;background-color: #f0f0f0;}
</style>